<template>
  <header :class="['home-header', 'wrap', { 'header-active': headerActive }]">
    <van-icon class="icon-caidan" name="wap-nav" />
    <div class="header-search">
      <span class="app-name">G</span>
      <i class="iconfont icon-search"></i>
      <span class="search-title">家电返场同价11.11</span>
    </div>
    <router-link v-if="!$store.getters.getIsLogin" to="/login" tag="span"
      >登录</router-link
    >
    <router-link
      class="iconfont iconfont-gerenzhongxin"
      v-else
      tag="i"
      to="/user"
    ></router-link>
  </header>
</template>

<script>
export default {
  data() {
    return {
      headerActive: false,
    };
  },
  methods: {
    // 首页导航背景切换
    cutover() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      this.headerActive = scrollTop > 100 ? true : false;
    },
  },
  created() {
    // console.log(this.cutover());
  },
  mounted() {
    window.addEventListener("scroll", this.cutover);
  },
};
</script>

<style lang="scss" scoped>
@import "@/common/style/mixin";
.home-header {
  position: fixed;
  left: 0;
  top: 0;
  @include fj;
  width: 100%;
  height: 100px;
  line-height: 100px;
  padding: 0 30px;
  @include boxSizing;
  font-size: 30px;
  color: #fff;
  z-index: 10000;
  // background: $red;

  .icon-caidan {
    font-size: 50px;
    padding-top: 25px;
  }

  .header-search {
    display: flex;
    width: 74%;
    height: 40px;
    line-height: 40px;
    margin: 20px 0;
    padding: 10px 0;
    color: #232326;
    background: #fff;
    @include borderRadius(40px);

    .app-name {
      padding: 0 20px;
      color: $red;
      font-size: 40px;
      font-weight: bold;
      border-right: 1px solid #666;
    }

    .icon-search {
      padding: 0 20px;
      font-size: 34px;
    }

    .search-title {
      font-size: 24px;
      color: #666;
    }
  }

  .icon-iconyonghu {
    font-size: 44px;
  }
}

.header-active {
  background: $red;
}
</style>

<style>
.home-header .iconfont {
  font-size: 45px;
}
</style>